<template>
  <div class="list-container">
    <div class="nav-bar">

      <van-nav-bar fixed
                   title="事项跟踪"
                   @click-left="$router.go(-1)"
                   @click-right="$router.push('index')"
                   left-arrow>
        <template #right>
          <van-icon name="wap-home" />
        </template>
      </van-nav-bar>
    </div>
    <div class="search-wrap">
      <div class="search-fixed">
        <van-search class="search"
                    show-action>
          <template #action>
            <van-icon name="filter-o"
                      color="#1989fa"
                      size="normal"
                      @click="filterShow = true" />
          </template>
        </van-search>
        <div class="total">
          <span>共（{{36}}）条</span>
        </div>
      </div>
    </div>
    <van-pull-refresh v-model="isreFreshLoading"
                      @refresh="onRefresh"
                      :success-duration="500"
                      :success-text='`刷新成功，加载${items.length} 条记录`'>
      <van-list v-model:loading="loading"
                v-model:error="error"
                :finished="finished"
                finished-text="没有更多了"
                error-text="请求失败，点击重新加载"
                @load="load">
        <list-card v-for="(todo, index) in items"
                   :key="index"
                   :title="`[${todo.projectType}]  ${todo.projectName}`"
                   :rightDescription="todo.status"
                   :linked="true"
                   :leftIconSrc="todo.img">
          <template #content>
            <span>{{todo.createDate}}</span>
          </template>
        </list-card>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { onMounted, toRefs } from "@vue/runtime-core"
import ListCard from '@/components/ListCard.vue'
import { usePullRefresh } from '@/hooks/usePullRefresh.js'
import { indexTodo } from "@/api/request/basic"

export default {
  components: {
    ListCard
  },

  setup () {
    // 下拉刷新列表
    const { state, load, onRefresh, initPullRefresh } = usePullRefresh()
    onMounted(() => {
      initPullRefresh({ request: indexTodo })
      load()
    })
    return {
      load,
      onRefresh,
      ...toRefs(state)
    }
  }
}
</script>

<style scoped>
</style>